<template>
    <div v-show="show" class="edit-text-pop">
        <div class="text-bg"></div>
        <div class="text-wrap">
            <div class="text-head">{{ title }}<a href="javascript:" class="iconfont icon-guanbi" @click="show = false"></a></div>
            <div class="text-content">
                <textarea ref="textarea" placeholder="请输入..." :maxlength="maxlength"></textarea>
            </div>
            <div class="text-btn-wrap">
                <button type="button" class="c-btn sm" @click="save">保存</button>
                <button type="button" class="c-btn sm transprant" @click="show = false">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'editTextPop',
        data(){
            return {
                show: false,
            }
        },
        props: {
            maxlength: {type: Number, default: null},
            title: { type: String, default: '编辑文本' },
        },
        methods: {
            save(){
                this.$emit('save', this.$refs.textarea.value);
                this.show = false;
            },
        },
    }
</script>

<style lang="scss">
    .edit-text-pop{
        position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 19;
        .text-bg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: -1;background: rgba(0,0,0,0.5);}
        .text-head{border-bottom: 1px solid #d8e3eb;line-height: 48px;padding: 0 24px;font-size: 18px;}
        .text-head a{float: right;font-size: 24px;line-height: 32px;width: 32px;text-align: center;margin-top: 8px;color: #666;}
        .text-wrap{position: absolute;left: 50%;top: 40%;width: 400px;margin-left: -200px;margin-top: -170px;background: #fff;border-radius: 4px;box-sizing: border-box;}
        .text-content{padding: 16px;}
        .text-content textarea{width: 100%;box-sizing: border-box;height: 200px;border-radius: 4px;}
        .text-btn-wrap{text-align: center;padding: 12px 0;border-top: 1px solid #d8e3eb;}
    }
</style>
